{template 'common/header'}
<style type="text/css">
    .pic img{display:inline-block;width:50%;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
    .pic .webuploader-pick{ font-size:14px;}
    .pic .js-image-pic{ border-left:none;border-radius:0 4px 4px 0!important;padding: 3px 10px!important;}
    /*.mui-bar a{color: #ff9900;}*/
    /*.mui-btn{ border:none!important;}*/
    /*.mui-btn-primary{background-color: #ff9900;}*/
    /*.mui-btn-primary:enabled:active{background-color: #ec7230!important;}*/

    .mui-btn-cancel{color: #fff;background-color: #b8b8b8;}
    .mui-textarea{ height:auto!important; width:100%;}
    .area {margin: 20px auto 0px auto;}
    .mui-input-group:first-child {margin-top: 20px;}
    .mui-input-group label {width: 25%;}
    .mui-input-row label~input,
    .mui-input-row label~select,
    .mui-input-row label~textarea {width: 75%;}
    .mui-checkbox input[type=checkbox],
    .mui-radio input[type=radio] {top: 6px;}
    .mui-image-uploader .mui-upload-btn{width: 60px;height: 60px;}
    .mui-image-uploader .mui-upload-btn .webuploader-pick{width: 60px;height: 60px; font-size:60px;}
    .mui-image-uploader img{width: 60px;height: 60px; }
    .mui-btn.mui-btn-blue.mui-poppicker-btn-ok{background-color: #d70010;color: #ffffff;border: 1px solid #d70010;}

</style>

<div class="mui-content">
    {template 'common/nav'}
    <h5 class="mui-desc-title mui-pl15">发布帖子</h5>
    <form class="mui-input-group"  action="" method="post" onSubmit="return check(this)" >
        <div class="mui-input-row">
            <label>标题：</label>
            <input type="text" name="title" id="title" placeholder="请输入标题">
        </div>


        <div class="mui-input-row">
            <label>栏目：</label>
            <input class="js-user-options" name="cname" type="text" value="" readonly="" placeholder="请选择栏目">
            <input type="hidden" name="cid" id="cid">
            <script type="text/javascript">
                $(".js-user-options").on("tap", function(){
                    var options = {data: [
                        {loop $categorys $row}
                        {"text":"{$row['cname']}","value":"{$row['id']}"},
                        {/loop}
                    ]};
                    var $this = $(this);
                    util.poppicker(options, function(items){
                        $this.val(items[0].text);
                        $("#cid").val(items[0].value);
                    });
                });
            </script>
        </div>



        <div class="mui-input-row mui-textarea">
            <textarea id="content"   class="mui-input-clear" name="content" placeholder="请输入内容" style="height: 180px;"></textarea>
        </div>


        <div class="mui-table-view-chevron" style="display: none;">
            <div class="mui-image-uploader">
                <label>封面：</label>
                <a href="javascript:;" class="mui-upload-btn mui-pull-right js-image-pic"></a>
                <div class="mui-image-preview js-image-preview mui-pull-right">
                    <img src="./resource/images/nopic.jpg" data-id="" data-preview-src="" data-preview-group="__IMG_UPLOAD_pic"/>
                    <input type="hidden" value="" id="pic" name="pic" />
                </div>
            </div>
            <script>

                util.image($('.js-image-pic'), function(url){
                    //$('.js-image-pic').parent().find('.js-image-preview').append('<input type="hidden" value="'+url.attachment+'" name="pic" />');
                    util.toast('上传成功');
                    $('.js-image-pic').parent().find('#pic').val(url.attachment);
                    $('.js-image-pic').parent().find('img').attr("src",url.url);
                    $('.js-image-pic').parent().find('img').attr("data-id",url.id);
                    $('.js-image-pic').parent().find('img').attr("data-preview-src",url.url);
                    if ($('.js-image-pic').parent().find('img').length==1){

                    }else{

                    }
                }, {
                    crop : true,
                    multiple : false,
                    preview : '__IMG_UPLOAD_pic',
                });

            </script>
        </div>
        <div class="mui-input-row mui-textarea" >
            <label>图片：</label>
            {php echo tpl_app_form_field_image('pics', $pics);}
        </div>
        <p></p>
        <div class="mui-content-padded" style="margin-top: 20px;">
            <button type="submit" class="mui-btn mui-btn-block mui-btn-primary">发布帖子</button>
            <button type="button" class="mui-btn mui-btn-block mui-btn-cancel" onClick="history.go(-1);">取　消</button>&nbsp;&nbsp;&nbsp;
            <input type="hidden" name="submit" value="发布帖子"/>
            <!--<input type="hidden" name="activityid" value="{$activityid}" />-->
            <input type="hidden" name="token" value="{$_W['token']}" />
        </div>
    </form>
</div>

<script type="text/javascript">
    function check(form) {

        if (!form['title'].value) {
            util.alert('请输入标题', ' ', function() {
                $("input[name='title']").focus();
            });
            return false;
        }

//        if (!form['mobile'].value) {
//            util.alert('请输入手机号', ' ', function() {
//                $("input[name='mobile']").focus();
//            });
//            return false;
//        }else{
//            var mobile = $('#mobile').val();
//            var pattern = /^1[34578]\d{9}$/;
//
//            if (!pattern.test(mobile)) {
//                util.alert('手机号不合法', ' ', function() {
//                    $("input[name='mobile']").focus();
//                });
//                return false;
//            }

//        }
//        if (form['gender'].value=='') {
//            util.alert('请选择您的性别', ' ', function() {
//                $(".js-user-options").trigger('tap');
//            });
//            return false;
//        }
        return true;
    }
    $(".pic input.form-control").attr('type','text');
    $(".pic .js-image-pic").addClass('input-group-btn');

    //nav激活
    mui.init();
    mui('.mui-bar-tab').on('tap', 'a',
        function() {
            var $this = $(this);
            if (this.getAttribute('href') != null) {
                console.log(this.getAttribute('href'));
                location.href = this.getAttribute('href');
            } else {
                return false;
            }
        })

    $('.mui-icon-compose').parent().addClass('mui-active');
</script>
</body>
</html>